<template>
  <div class="job">
    <p>
      <a-button type="primary" @click="handleAdd()">新增</a-button>
      &nbsp;
      <a-button type="primary" @click="handleQuery()">刷新</a-button>
    </p>
    <a-table :data-source="jobs" :columns="columns" :loading="loading">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-space>
            <a-popconfirm
              title="手动执行会立即执行一次，确定执行？"
              ok-text="是"
              cancel-text="否"
              @confirm="handleRun(record)"
            >
              <a-button type="primary" size="small">手动执行</a-button>
            </a-popconfirm>
            <a-popconfirm
              title="确定重启？"
              ok-text="是"
              cancel-text="否"
              @confirm="handleResume(record)"
            >
              <a-button
                v-show="record.state === 'PAUSED' || record.state === 'ERROR'"
                type="primary"
                size="small"
              >
                重启
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              title="确定暂停？"
              ok-text="是"
              cancel-text="否"
              @confirm="handlePause(record)"
            >
              <a-button
                v-show="record.state === 'NORMAL' || record.state === 'BLOCKED'"
                type="primary"
                size="small"
              >
                暂停
              </a-button>
            </a-popconfirm>
            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm
              title="删除后不可恢复，确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record)"
            >
              <a-button danger size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>

    <a-modal
      v-model:visible="modalVisible"
      title="用户"
      :confirm-loading="modalLoading"
      @ok="handleModalOk"
    >
      <a-form :model="job" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="类名">
          <a-input v-model:value="job.name" />
        </a-form-item>
        <a-form-item label="描述">
          <a-input v-model:value="job.description" />
        </a-form-item>
        <a-form-item label="分组">
          <a-input v-model:value="job.group" :disabled="!!job.state" />
        </a-form-item>
        <a-form-item label="表达式">
          <a-input v-model:value="job.cronExpression" />
          <div class="ant-alert ant-alert-success">
            每5秒执行一次：0/5 * * * * ?
            <br />
            每5分钟执行一次：* 0/5 * * * ?
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { JobApi } from '@/api/job';

const jobs = ref();
const loading = ref();

const columns = [
  {
    title: '分组',
    dataIndex: 'group',
  },
  {
    title: '类名',
    dataIndex: 'name',
  },
  {
    title: '描述',
    dataIndex: 'description',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '表达式',
    dataIndex: 'cronExpression',
  },
  {
    title: '上次时间',
    dataIndex: 'preFireTime',
  },
  {
    title: '下次时间',
    dataIndex: 'nextFireTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

const handleQuery = async () => {
  loading.value = true;
  jobs.value = [];
  const { data } = await JobApi.query();
  try {
    jobs.value = data;
    loading.value = false;
  } catch (error: any) {
    message.error(error.message);
  } finally {
    loading.value = false;
  }
};

// -------- 表单 ---------
const job = ref();
job.value = {};
const modalVisible = ref(false);
const modalLoading = ref(false);
const handleModalOk = async () => {
  modalLoading.value = true;
  if (job.value.state) {
    await JobApi.update(job.value);
    message.success('保存成功');
  } else {
    await JobApi.add(job.value);
    message.success('保存成功');
  }
  modalLoading.value = false;
  modalVisible.value = false;
  handleQuery();
};

/**
 * 新增
 */
const handleAdd = () => {
  modalVisible.value = true;
  job.value = {
    group: 'DEFAULT',
  };
};

/**
 * 编辑
 */
const handleEdit = (record: any) => {
  modalVisible.value = true;
  //   job.value = Tool.copy(record);
  job.value = record;
};

/**
 * 删除
 */
const handleDelete = async (record: any) => {
  try {
    await JobApi.delete({
      name: record.name,
      group: record.group,
    });
    message.success('删除成功');
    handleQuery();
  } catch (error) {
    message.error('删除失败');
  }
};

/**
 * 暂停
 */
const handlePause = async (record: any) => {
  try {
    await JobApi.pause({
      name: record.name,
      group: record.group,
    });
    message.success('暂停成功！');
    handleQuery();
  } catch (error) {
    message.error('暂停失败！');
  }
};

/**
 * 重启
 */
const handleResume = async (record: any) => {
  modalLoading.value = true;
  try {
    await JobApi.reschedule(record);
    modalLoading.value = false;
    modalVisible.value = false;
    message.success('重启成功！');
    handleQuery();
  } catch (error) {
    modalLoading.value = false;
    message.error('重启失败! ');
  }
};

/**
 * 手动执行
 */
const handleRun = async (record: any) => {
  try {
    await JobApi.run(record);
    message.success('手动执行成功！');
    handleQuery();
  } catch (error) {
    message.error('手动执行失败！');
  }
};

// const getEnumValue = (key, obj) => {
//   return Tool.getEnumValue(key, obj);
// };

onMounted(() => {
  console.log('index mounted!');
  handleQuery();
});
</script>

<style scoped></style>
